<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <div id="treeViewContainer" style="background-color: white; opacity: 0.5; padding-right: 30px; position: absolute;"></div>
  </body>
  <script type="module">

    import {Viewer, GLTFLoaderPlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.es.js";

    const viewer = new Viewer({ canvasId: "myCanvas" });

    new TreeViewPlugin(viewer, {
        containerElement: document.getElementById("treeViewContainer"),
        autoExpandDepth: 3, // Initially expand tree three storeys deep
        hierarchy: "containment"
    });

    const src = window.document.location.hash.match(/src=([^&]+)/);
    const model = new GLTFLoaderPlugin(viewer).load({ src: src[1], autoMetaModel: true });
    model.on("loaded", () => viewer.cameraFlight.jumpTo(model));

  </script>
</html>
